<template>
  <div class="thandfo">
    <div class="btnbox">
      <button @click="choose(1)">省市</button>
      <button @click="choose(2)">销量</button>
    </div>
    <Three v-if="id == 1"></Three>
    <Four v-else></Four>
  </div>
</template>

<script>
import Three from '@/views/All/Three.vue'
import Four from '@/views/All/Four.vue'
export default {
  data() {
    return {
      id: 1
    }
  },
  components: {
    Three,
    Four
  },
  methods: {
    choose(num) {
      this.id = num
    }
  },
}
</script>

<style lang="less" scoped>
.btnbox {
  width: 300px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
button {
  display: block;
  color: white;
  width: 140px;
  height: 50px;
  outline-color: white;
  border: none;
}
button:nth-child(1) {
  background-color: #E6A23C;
}
button:nth-child(2) {
  background-color: #67C23A;
}
</style>